<template>
  <div>
    <a-row>
      <a-col :span="16">
        <div>
          <a-row>
            <a-col :span="12">
              <a-card
                title="服务器总数"
                style="width: 28vw; margin-left: 10px; margin-top: 10px"
              >
                <p>总实例：<strong>10</strong></p>
                <p>运行实例：<strong>8</strong></p>
                <p>闲置实例：<strong>2</strong></p>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card
                title="总资产"
                style="width: 28vw; margin-left: 10px; margin-top: 10px"
              >
                <h2>¥<strong>19,433</strong></h2>
                <a-alert message="还可节省约¥2388" type="info" />
              </a-card>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-card
                title="最近消费"
                style="width: 56vw; margin-left: 10px; margin-top: 10px"
              >
                <a-row>
                  <a-col :span="16">
                    <div
                      id="myChart"
                      :style="{ width: '600px', height: '300px' }"
                    ></div>
                  </a-col>
                  <a-col :span="8">
                    <p>本周消费</p>
                    <h2>¥ <strong>420</strong></h2>
                    <a-alert message="预计节省5%" type="info" />
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-card
                title="优化建议"
                style="width: 56vw; margin-left: 10px; margin-top: 10px"
              >
                <a slot="extra" href="#">详细信息</a>
                <p>
                  您的服务器实例：<a-tag color="#108ee9">{{
                    $global.randomStr(18)
                  }}</a-tag>
                  当前处于闲置状态，可删除
                </p>
                <p>
                  您的服务器实例：<a-tag color="#108ee9">{{
                    $global.randomStr(18)
                  }}</a-tag>
                  当前处于闲置状态，可删除
                </p>
                <p>
                  您的服务器实例：<a-tag color="#108ee9">{{
                    $global.randomStr(18)
                  }}</a-tag>
                  当前性能过剩，建议降配
                </p>
                <a-row type="flex" justify="center" style="margin-top: 20px">
                  <a-col :span="8">
                    <a-statistic
                      title="预计性能利用率"
                      :value="11.28"
                      :precision="2"
                      suffix="%"
                      :value-style="{ color: '#3f8600' }"
                      style="margin-right: 50px"
                    >
                      <template #prefix>
                        <a-icon type="arrow-up" />
                      </template>
                    </a-statistic>
                  </a-col>
                  <a-col :spam="8">
                    <a-statistic
                      title="预计成本下降"
                      :value="9.3"
                      :precision="2"
                      suffix="%"
                      class="demo-class"
                      :value-style="{ color: '#cf1322' }"
                    >
                      <template #prefix>
                        <a-icon type="arrow-down" />
                      </template>
                    </a-statistic>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-col>
      <a-col :span="8">
        <div>
          <a-card
            title="安全预警"
            style="width: 27vw; margin-left: 10px; margin-top: 10px"
          >
            <p>共发现安全问题：<strong>5</strong> 项</p>
            <p>严重漏洞：<strong>2</strong> 项</p>
            <p>轻微漏洞：<strong>1</strong> 项</p>
            <p>可忽略漏洞：<strong>2</strong>项</p>
            <li>
              严重漏洞建议修复，位于实例
              <a-tag color="#108ee9">{{ $global.randomStr(18) }}</a-tag>
            </li>
            <a-alert
              message="web入侵风险较高"
              type="warning"
              show-icon
              style="margin-top: 10px"
            />
            <a-alert
              message="SSl未配置（1台）"
              type="warning"
              show-icon
              style="margin-top: 10px"
            />
          </a-card>
          <a-card
            title="资源预警"
            style="width: 27vw; margin-left: 10px; margin-top: 10px"
          >
            <a-row>
              <a-col :span="12">
                <a-card
                  size="small"
                  title="近24小时报警"
                  style="
                    width: 150px;
                    margin-right: 10px;
                    background-color: whitesmoke;
                    margin-left: 20px;
                  "
                >
                  <h2 style="text-align: center">0</h2>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card
                  size="small"
                  title="警告事件"
                  style="
                    width: 150px;
                    background-color: whitesmoke;
                    margin-left: 20px;
                  "
                >
                  <h2 style="color: red; text-align: center">1</h2>
                </a-card>
              </a-col>
            </a-row>
            <a-statistic
              title="运营评分"
              :value="93"
              class="demo-class"
              style="margin-top: 10px"
            >
              <template #suffix>
                <span> / 100</span>
              </template>
            </a-statistic>
            <a-alert
              message="资源负载目前正常"
              type="success"
              style="margin-top: 15px"
            />
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '消费记录' },
        tooltip: {},
        xAxis: {
          data: ['120', '50', '70', '30', '100', '40'],
        },
        yAxis: {},
        series: [
          {
            name: '消费',
            type: 'bar',
            data: [120, 50, 70, 30, 100, 40],
          },
        ],
      })
    },
  },
}
</script>
